<template>
 	<view class="modifyAddress">
 		<!-- 修改收货地址 -->
 		<view class="top">
 			<view class="top-box">
 				<text>收货人</text>
 				<input type="text" value="" placeholder="请填写收货人姓名"/>
 			</view>
 			<view class="top-box">
 				<text>手机号</text>
 				<input type="text" value="" placeholder="请填写收货人电话"/>
 			</view>
 		</view>
 		<view class="middle">
 			<view class="middle-box">
 				<text>所在地区</text>
				<text @click="btnClick()" style="color: #666666;width: 520rpx;">请选择</text>
 				<image style="width: 30rpx;height: 16rpx;" src="../../../../static/mine/bottomjiantou.png" mode=""></image>
 			</view>
 			<view class="middle-box">
 				<text>详细地址</text>
 				<textarea style="height: 90rpx;" placeholder-style="color:#999999"
 					placeholder="详细地址如：街道、门牌号、小区、楼栋号、单元等。" />
 			</view>
 		</view>
 		<view class="defaultBtn">
 			<text>设为默认地址</text>
 			<u-switch v-model="value" @change="change" activeColor="#FF7200" inactiveColor="#C2C2C2"></u-switch>
 		</view>
 		<view class="sureBtn">
 			<view class="sureBtn-box" @click="sure">
 				确定
 			</view>
 		</view>
		<select-address ref='selectAddress' @selectAddress="successSelectAddress"></select-address>
 	</view>
 </template>
 
 <script>
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
 	export default {
		components:{
			selectAddress
		},
 		data() {
 			return {
 				value:false,
 			}
 		},
 		methods: {
 			change(e) {
 				console.log('change', e);
 				
 			},
			btnClick() {
				console.log(44444444);
				this.$refs.selectAddress.show()
			},
			successSelectAddress(address) { //选择成功回调
				console.log(address)
			},
			sure(){
				uni.navigateTo({
					url:'./address'
				})
			}
 		}
 	}
 </script>
 
 <style lang="less" scoped>
	 /deep/.input-placeholder{
		 font-size: 32rpx;
		 font-family: Source Han Sans CN;
		 font-weight: 400;
		 color: #999999;
	 }
 	.sureBtn{
 		width: 100%;
 		height: 88rpx;
 		background: #FFFFFF;
 		opacity: 1;
 		border-radius: 0px;
 		position: fixed;
 		left: 0;
 		bottom: 0;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		.sureBtn-box{
 			width: 670rpx;
 			height: 60rpx;
 			background: linear-gradient(163deg, #FF7200 0%, #EF130B 100%);
 			opacity: 1;
 			border-radius: 30rpx;
 			font-size: 32rpx;
 			font-family: Source Han Sans CN;
 			font-weight: 400;
 			line-height: 48rpx;
 			color: #FFFFFF;
 			align-self: center;
 			text-align: center;
 		}
 	}
 	/deep/.u-switch{
 		width: 80rpx !important;
 		height: 32rpx !important;
 		border-radius: 0 !important;
 	}
 	/deep/.u-switch__node{
 		width: 40rpx !important;
 		height: 32rpx !important;
 		background: #FFFFFF;
 		opacity: 1;
 		border-radius: 4rpx !important;
 	}
 .modifyAddress{
 	padding: 40rpx;
 	.defaultBtn{
 		padding: 10rpx;
 		margin-top: 20rpx;
 		width: 100%;
 		height: 58rpx;
 		background: #FFFFFF;
 		opacity: 1;
 		border-radius: 0px;
 		line-height: 38rpx;
 		font-size: 32rpx;
 		font-family: Source Han Sans CN;
 		font-weight: 400;
 		color: #333333;
 		display: flex;
 		justify-content: space-between;
 	}
 	.middle{
 		width: 100%;
 		height: 240rpx;
 		background: #FFFFFF;
 		opacity: 1;
 		border-radius: 0px;
 		padding: 10rpx;
 		.middle-box{
 			border-bottom:1px solid #F2F2F2;
 			padding: 15rpx;
 			display: flex;
 			align-items: center;
 			font-size: 32rpx;
 			font-family: Source Han Sans CN;
 			font-weight: 400;
 			color: #333333;
 			text:first-child{
 				width: 180rpx;
 			}
 		}
 	}
 	.top{
 		margin-bottom: 40rpx;
 		width: 100%;
 		height: auto;
 		background: #FFFFFF;
 		opacity: 1;
 		border-radius: 0px;
 		padding: 10rpx;
 		.top-box{
 			border-bottom:1px solid #F2F2F2;
 			padding: 15rpx;
 			display: flex;
 			align-items: center;
 			font-size: 32rpx;
 			font-family: Source Han Sans CN;
 			font-weight: 400;
 			color: #333333;
 			text{
 				width: 120rpx;
 			}
 		}
 	}
 }
 </style>
 